<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
	$(function(){
		$("#addPlayListForm").submit(function(){
			if(!$(":input[name=playListName]").val()){
				alert("플레이리스트 제목을 입력하세요.");
				return false;
			}
		});//addPlayListForm submit
		
		$(":input[name=deleteBtn]").click(function(){
			var playListNo = $(this).parents("tr").attr("list-no");
			if(confirm("플레이리스트를 삭제하시겠습니까?")){
				location.href = "playlist_removePlayList.ju?playListNo="+playListNo;
			}
		});//deleteBtn click
		
		// 수정상태를 초기화시키기위한 함수
		function resetForm(form){
			var playListNo = form.parents("tr").attr("list-no");
			var playListName = form.parents("tr").attr("list-name");
			$("tr[list-no="+playListNo+"] div").html("<a href='playlist_getMusicList.ju?playListNo="+playListNo+"&playListName="+playListName+" }'>"+playListName+"</a>"); 
			form.parent().html("<button type='button' name='updateFormBtn' class='btn btn-default btn-xs'>수정</button>");
		}
	
		//$("button[name='updateBtn']").click(function(){
		$("#playlist_section").on("click", ":input[name=updateFormBtn]", function(){
			$(":input[name=updateCancleBtn]").each(function(){
				resetForm($(this));
			});
			var playListNo = $(this).parents("tr").attr("list-no");
			$("tr[list-no="+playListNo+"] div").html("<input type='text' name='playListName' placeholder='플레이리스트 이름' style='width: 400px'>"
					+" <span><button type='button' name='updateBtn' class='btn btn-default btn-xs'>수정</button></span>");
			$(this).parent().html("<button type='button' name='updateCancleBtn' class='btn btn-default btn-xs'>취소</button>");
		});//updateBtn click
		
		$("#playlist_section").on("click", ":input[name=updateCancleBtn]", function(){
			resetForm($(this));
		});//updateCancleBtn click
		
		$("#playlist_section").on("click", ":input[name=updateBtn]", function(){
			var playListNo = $(this).parents("tr").attr("list-no");
			var playListName = $(":input[name=playListName]").val();
			
			if(!playListName){
				alert("제목을 입력해주세요.");
				return;
			}
			location.href = "playlist_uploadPlayList.ju?playListNo="+playListNo+"&playListName="+playListName;
		});//updateCancleBtn click
	});//ready
</script>
<table class="table table-striped table-hover ">
	<thead>
		<tr>
			<th>플레이리스트 이름</th>
			<th>수정</th>
			<th>삭제</th>
		</tr>
	</thead>
	<tbody id="playlist_section">
	<c:forEach items="${list }" var="list">
		<tr list-no="${list.PLAYLIST_NO }" list-name="${list.PLAYLIST_NAME }">
			<td style="width: 780px;">
				<div><a href="playlist_getMusicList.ju?playListNo=${list.PLAYLIST_NO }&playListName=${list.PLAYLIST_NAME }">${list.PLAYLIST_NAME }</a></div>
			</td>
			<td><button type="button" name="updateFormBtn" class="btn btn-default btn-xs">수정</button></td>
			<td><button type="button" name="deleteBtn" class="btn btn-danger btn-xs">삭제</button></td>
		</tr>
	</c:forEach>
	</tbody>
</table>
<div class="titleSection">
<div class="form-group">
	<form action="playlist_addPlayList.ju" method="post" id="addPlayListForm">
	<strong>+플레이리스트 추가</strong>
	<input type="text" class="form-control" name="playListName" placeholder="플레이리스트 이름" style="width: 400px; display: inline-block; vertical-align: bottom;">
	<input type="hidden" name="memberId" value="${sessionScope.mvo.id }">
	<input type="submit" class="btn btn-primary" value="추가">
	</form>
	</div>
</div>